<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单元素示例</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 20px auto; padding: 20px; }
        form { border: 1px solid #ddd; padding: 20px; border-radius: 8px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input, select, textarea { width: 100%; padding: 8px; box-sizing: border-box; }
        fieldset { border: 1px solid #ddd; margin-bottom: 15px; padding: 10px; }
    </style>
</head>
<body>
    <h1>常见表单元素示例</h1>
    
    <form action="/submit" method="post" enctype="multipart/form-data">
        <!-- 文本输入 -->
        <div class="form-group">
            <label for="username">用户名（text类型）：</label>
            <input type="text" id="username" name="username" 
                   placeholder="输入用户名" required maxlength="20">
            <small>必填，最多20个字符</small>
        </div>

        <!-- 密码输入 -->
        <div class="form-group">
            <label for="pwd">密码（password类型）：</label>
            <input type="password" id="pwd" name="password" required>
        </div>

        <!-- 邮箱与电话 -->
        <div class="form-group">
            <label for="email">邮箱（email类型）：</label>
            <input type="email" id="email" name="email" 
                   placeholder="user@example.com" required>
        </div>

        <div class="form-group">
            <label for="tel">电话（tel类型）：</label>
            <input type="tel" id="tel" name="phone" pattern="[0-9]{11}">
            <small>格式：11位数字</small>
        </div>

        <!-- 选择类输入 -->
        <fieldset>
            <legend>选择类元素</legend>
            
            <!-- 单选按钮 -->
            <div class="form-group">
                <label>性别（radio类型）：</label>
                <label><input type="radio" name="gender" value="male" checked> 男</label>
                <label><input type="radio" name="gender" value="female"> 女</label>
            </div>

            <!-- 复选框 -->
            <div class="form-group">
                <label>兴趣（checkbox类型）：</label>
                <label><input type="checkbox" name="hobby" value="sports"> 运动</label>
                <label><input type="checkbox" name="hobby" value="music"> 音乐</label>
            </div>

            <!-- 下拉选择 -->
            <div class="form-group">
                <label for="city">城市（select类型）：</label>
                <select id="city" name="city">
                    <option value="">请选择</option>
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                    <option value="gz">广州</option>
                </select>
            </div>
        </fieldset>

        <!-- 特殊类型输入 -->
        <fieldset>
            <legend>HTML5 新增类型</legend>
            
            <div class="form-group">
                <label for="birthdate">生日（date类型）：</label>
                <input type="date" id="birthdate" name="birthdate">
            </div>

            <div class="form-group">
                <label for="favcolor">颜色选择（color类型）：</label>
                <input type="color" id="favcolor" name="favcolor" value="#ff0000">
            </div>

            <div class="form-group">
                <label for="volume">音量控制（range类型）：</label>
                <input type="range" id="volume" name="volume" min="0" max="100" step="10">
            </div>
        </fieldset>

        <!-- 文件上传 -->
        <div class="form-group">
            <label for="avatar">上传头像（file类型）：</label>
            <input type="file" id="avatar" name="avatar" accept="image/*">
        </div>

        <!-- 多行文本 -->
        <div class="form-group">
            <label for="bio">个人简介（textarea）：</label>
            <textarea id="bio" name="bio" rows="4" 
                      placeholder="请输入个人简介"></textarea>
        </div>

        <!-- 按钮 -->
        <div class="form-group">
            <button type="submit">提交表单</button>
            <button type="reset">重置</button>
            <button type="button" onclick="alert('普通按钮')">普通按钮</button>
        </div>
    </form>

    <!-- 数据列表示例 -->
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Safari">
    </datalist>
</body>
</html>
